
<!-- 用户 -->
<template style="max-height: 2000px">



    <main style="max-height: 2000px">

        <el-container>
            <!--            筛选部分    ===================================================================================================================-->

            <div style="margin: 10px 0">
                <el-row :gutter="20" style="height: 35px">
                    <el-col :span="6"><!-- 关键字 -->
                        <el-input placeholder="请输入内容关键字" suffix-icon="el-icon-search" class="selectInput" v-model="reqParam.searchContent" clearable :prefix-icon="Search"></el-input>
                    </el-col>
                    <el-col :span="6"><!-- id -->
                        <el-input class="selectInput" placeholder="请输入id" suffix-icon="el-icon-search" v-model="reqParam.id"></el-input>
                    </el-col>
                    <el-col :span="6"><!-- 身份 -->
                        <el-select v-model="reqParam.identity" class="selectInput" placeholder="全部" size="large">
                            <el-option
                                v-for="item in identityMap.entries()"
                                :key="item[0]"
                                :label="item[1]"
                                :value="item[0]"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="6"><!-- 性别 -->
                        <el-select v-model="reqParam.userGender" class="selectInput" placeholder="全部" size="large">
                            <el-option
                                v-for="item in genderMap.entries()"
                                :key="item[0]"
                                :label="item[1]"
                                :value="item[0]"
                            />
                        </el-select>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"><!-- 状态 -->
                        <el-select v-model="reqParam.status" class="selectInput" placeholder="全部" size="large">
                            <el-option
                                    v-for="item in statusMap.entries()"
                                    :key="item[0]"
                                    :label="item[1]"
                                    :value="item[0]"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="6"><!-- 起始时间 -->
                        <el-date-picker class="selectInput" style="margin: 10px;width: 100%" v-model="reqParam.startTime" type="datetime" size="large" placeholder="选择起始时间"/>
                    </el-col>
                    <el-col :span="6"><!-- 结束时间 -->
                        <el-date-picker class="selectInput" style="margin: 10px;width: 100%" v-model="reqParam.endTime" type="datetime" size="large" placeholder="选择结束时间"/>
                    </el-col>

                </el-row>


                <div style="margin: 10px 0">
                    <el-button class="el-icon-circle-plus-outline" type="primary" @click="getList">搜索</el-button>
                    <el-button class="el-icon-circle-plus-outline" type="primary" @click="resetCondition()">重置筛选条件</el-button>
                    <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
                </div>
            </div>

        </el-container>
        <el-container>
            <!--            数据展示部分    ===================================================================================================================-->
            <el-scrollbar max-height="1080px" style="width: 80vw">
                <el-table height="400" :data="dataList" stripe style="width: 100%">
                    <el-table-column type="selection" width="50" @select="reqParam.selectList" />
                    <el-table-column prop="id" label="编号" width="80" />
                    <el-table-column prop="userName" label="用户名" width="100" />
                    <el-table-column prop="account" label="账号" width="180" />
                    <el-table-column prop="identity" label="身份" width="100">
                        <template v-slot="scope">
                            <span>{{ identityMap.get(scope.row.identity) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template v-slot="scope">
                            <el-tag size="default">{{ statusMap.get(scope.row.status) }}</el-tag>
<!--                            <span>{{ statusMap.get(scope.row.status) }}</span>-->
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="120" />
                    <el-table-column prop="phone" label="电话" width="120" />
                    <el-table-column prop="gmtCreateTime" label="注册时间" width="200" />
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <el-button size="default" type="info" @click="handleEdit(scope.row.id)">
                                查看详情
                            </el-button>
                            <el-button size="default" type="danger" @click="limit(scope.row.id)">
                                禁用
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </el-container>



        <el-container>
            <!--            分页工具    ===================================================================================================================-->
            <div class="demo-pagination-block">
                <el-pagination
                        v-model:current-page="pageNum"
                        v-model:page-size="pageSize"
                        :page-sizes="pageSizeList"
                        :small="true"
                        :disabled="false"
                        :background="true"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        style="float: right; margin-bottom: 10px"
                        @size-change="handleSizeChange()"
                        @current-change="handleCurrentChange()"
                        hide-on-single-page
                />
            </div>
        </el-container>
    </main>




</template>

<script setup>
import {changeStatus, getPostList, logicRemove} from "@/api/request";
import {ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import router from "@/api/routerConfig";
import {ElMessage} from "element-plus";


const loginUserId = ref("1")
const loginUserName = ref("")

const id = ref("")
const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const genderMap = ref(new Map([
    ['0', "保密"],
    ['1', "男"],
    ['2', "女"]
]))
const identityMap = ref(new Map([
    ['0', "普通用户"],
    ['1', "管理员"],
    ['3', "超级管理员"]
]))
const statusMap = ref(new Map([
    ['0', "待激活"],
    ['1', "正常"],
    ['2', "屏蔽"]
]))

const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    id: "",
    userName: "",
    account: "",
    password: "",
    userGender: "",
    identity: "",
    credit: 0,
    realName: "",
    identityNum: "",
    email: "",
    phone: "",
    amount: 0.0,
    status: "",
    invitedNum: "",
    startTime: "",
    endTime: ""
})



function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}

async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    req.loginUserId = loginUserId.value
    req.loginUserName = loginUserName.value
    let resp = await getPostList(reqParam.value, "/user/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}
function resetCondition() {
    reqParam.value = {
        loginUserId: "",
        loginUserName: "",
        id: "",
        userName: "",
        account: "",
        password: "",
        userGender: "",
        identity: "",
        credit: 0,
        realName: "",
        identityNum: "",
        email: "",
        phone: "",
        amount: 0.0,
        status: "",
        invitedNum: "",
        startTime: "",
        endTime: ""
    }
    getList(reqParam)
}

function handleEdit(index) {
    console.log(index)
    router.push({
        name: "userDetail",
        params: {
            id: index
        }
    })

}
async function handleDelete(index) {
    let check = confirm("确定要删除该用户吗？")
    if (check) {
        console.log("删除用户，id：" + index)
        let resp = await logicRemove(index, "/user/remove");
        if (resp.code === 200) {
            ElMessage.success("删除成功")
        }else {
            ElMessage.error("删除失败")
        }
        await getList(reqParam)
    }
}

async function limit(reqId, reqStatus) {
    let resp = await changeStatus(
        {
            id: reqId,
            status: reqStatus
        }, "/user/update"
    )
    console.log(resp)
    if (resp.code === 200) {
        ElMessage.success("更新成功")
    }else {
        ElMessage.error("更新失败")
    }
}

const dataList = ref([])

</script>






<style scoped>

.selectInput {
    margin: 10px;
    width: 100%;
    height: 65%;
}
.ml-5 {
    margin: 10px;
}

.block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
.block:last-child {
    border-right: none;
}
.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-pagination-block +  {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}
.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
.demo-datetime-picker .block:last-child {
    border-right: none;
}
.demo-datetime-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

</style>